<!-- Created by jack on 2022/4/2 - 16:43 -->
<style scoped lang="less">
.content-header{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  &__left{
    flex: 1;
  }
  &__right{
    position: relative;
    z-index: 200;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 300px;
    &__icon{
      user-select: none;
      padding: 4px;
      box-sizing: border-box;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      margin: 0 4px;
      transition: all ease-in-out 300ms;
      &:hover{
        background: #e8e8e8;
      }
    }
  }
}
</style>

<template>
<div class="content-header">
  <div class="content-header__left">
    <selectRow :list="list" :value="active" @update:value="netEasyMusicStore.pushRouter"/>
  </div>
  <div class="content-header__right">
    <search v-model="inputValue"/>
    <img src="../../icon/setting.png" class="content-header__right__icon" @click="openSetting">
    <img src="../../icon/email.png" class="content-header__right__icon" @click="openSetting">
  </div>
</div>
</template>

<script lang="ts" setup>
import selectRow from '../../components/selectRow.vue'
import search from '../../components/search.vue'
import netEasyMusicStore from '../../store'
import {computed, ref, watch} from "vue";

const props = defineProps({
  nav:{ type:String,default: '' },
})

// 当前选中的
const active = computed(() => netEasyMusicStore.$state.pageRoute)
// 获取列表
const list = computed( _ => {
  const list = netEasyMusicStore.getNavList(<string>props.nav)
  netEasyMusicStore.pushRouter(list?.[0]?.value)
  return list
})
const inputValue = ref('')
</script>
